<template>
  <main class="flex-1 p-6 flex-1">
    <!-- 数据统计 -->
    <div class="card-container">
      <div class="grid grid-cols-2 gap-6 mb-6">
        <!-- 柱状图 -->
        <div class="card card-bg text-theme-text" :class="themeColors.headerBg">
          <div class="text-base font-medium mb-2"></div>
          <div ref="barChart" class="chart-height"></div>
        </div>
        <!-- 饼图 -->
        <div class="card card-bg text-theme-text" :class="themeColors.headerBg">
          <div class="text-base font-medium mb-2"></div>
          <div ref="pieChart" class="chart-height"></div>
        </div>
      </div>

      <!-- 公告列表 -->
      <div class="card card-bg text-theme-text" :class="themeColors.headerBg">
        <h2 class="text-lg font-medium mb-6">公告列表</h2>
        <div class="space-y-2 mb-6"> <!-- 修改这里 -->
          <div class="flex items-start space-x-4" v-for="notice in notices" :key="notice.id">
            <el-icon class="mt-1 text-theme-secondary"></el-icon>
            <div>
              <div class="text-theme-text">{{ notice.title }}</div>
              <div class="text-sm text-theme-secondary">{{ notice.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import * as echarts from 'echarts';
import {getHomePageList} from '../../service/announcementApi.js'
import {countActivityRegistration} from '../../service/activityRegistrationApi.js'
import {countServiceReservation} from '../../service/serviceReservationApi.js'
export default {
  name: 'AdminIndexPage',
  data() {
    return {
      themeColors: {
        textColor: '#1F3A5F',
        textColorSecondary: '#94A3B8',
        cardBg: '#1A2942',
      },
      barChart: null,
      pieChart: null,
      // 动态数据
      barChartData: [], // 柱状图数据
      pieChartData: [], // 饼图数据
      // 公告列表
      notices: [
        { id: 1, title: '今天系统正式上线，开始内测', date: '2023-09-05' },
      ],
    };
  },
  created() {
    // 页面加载后获取数据
    this.fetchData();
  },
  mounted() {
    this.$nextTick(() => {
      this.updateCharts();
    });
  },
  methods: {
    async fetchData() {
      try {
        // 获取活动报名数据
        const activitiesResponse = await countActivityRegistration();
        this.barChartData = activitiesResponse.data;

        // 获取服务预约数据
        const servicesResponse = await countServiceReservation();
        this.pieChartData = servicesResponse.data;

        // 获取公告列表
        const noticesResponse = await getHomePageList();
        this.notices = noticesResponse.data;
        // 更新图表
        this.updateCharts();
      } catch (error) {
        console.error('获取数据失败：', error);
      }
    },
    updateCharts() {
      // 初始化柱状图
      if (this.barChart) {
        this.barChart.dispose();
      }
      this.barChart = echarts.init(this.$refs.barChart);
      this.barChart.setOption({
        title: {
          text: '各类活动报名数量统计',
          textStyle: { color: this.themeColors.textColor },
        },
        tooltip: {},
        xAxis: {
          data: this.barChartData.map((item) => item.name),
          axisLabel: { color: this.themeColors.textColorSecondary },
        },
        yAxis: {
          axisLabel: { color: this.themeColors.textColorSecondary },
        },
        series: [
          {
            type: 'bar',
            data: this.barChartData.map((item) => ({
              name: item.name,
              value: item.value,
              color: item.color, // 后端提供颜色
            })),
            itemStyle: {
              color: (params) => params.data.color || '#4E67F1', // 后端提供颜色
            },
          },
        ],
      });

      // 初始化饼图
      if (this.pieChart) {
        this.pieChart.dispose();
      }
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.pieChart.setOption({
        title: {
          text: '各类服务预约统计',
          textStyle: { color: this.themeColors.textColor },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {d}%',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.pieChartData.map((item) => ({
              name: item.name,
              value: item.value,
              color: item.color,
            })),
            itemStyle: {
              color: (params) => params.data.color || '#4E67F1', // 后端提供颜色
            },
          },
        ],
      });
    },
    getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
    },
  },
  beforeDestroy() {
    if (this.barChart) {
      this.barChart.dispose();
    }
    if (this.pieChart) {
      this.pieChart.dispose();
    }
  },
};
</script>


<style scoped>

/* 数据统计部分 */
.grid.grid-cols-2.gap-6.mb-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 1rem; /* 设置间距 */
}

.chart-height {
  width: 100%; /* 柱状图和饼图宽度占满父容器 */
  height: 300px; /* 设置高度 */
}

/* 公告列表 */
.card {
  padding-top: 10px;
  border-radius: 0.5rem;
  background: linear-gradient(to top, #d4eaf7, #b6ccd8);
  color: var(--theme-text);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  width: 100%; /* 公告列表宽度占满父容器 */
}

/* 主题样式 */
:root {
  --dark-theme-text: #FFFFFF;
  --dark-theme-secondary: #94A3B8;
  --dark-card-bg: #1A2942;

  --light-theme-text: #000000;
  --light-theme-secondary: #64748B;
  --light-card-bg: #FFFFFF;

  --header-bg: #1A2942;
  --sidebar-bg: #152238;
  --body-bg: #0A1931;
  --light-body-bg: #F8F9FA;
  --light-header-bg: #FFFFFF;
  --light-sidebar-bg: #F1F5F9;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--body-bg);
  color: var(--dark-theme-text);
}

.transition-colors {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.text-theme-text {
  color: var(--dark-theme-text);
}

.text-theme-secondary {
  color: var(--dark-theme-secondary);
}

/* 浅色主题样式 */
.light-theme {
  --theme-text: var(--light-theme-text);
  --theme-secondary: var(--light-theme-secondary);
  --card-bg: var(--light-card-bg);
  background-color: var(--light-body-bg);
}

.light-theme .text-theme-text {
  color: var(--light-theme-text);
}

.light-theme .text-theme-secondary {
  color: var(--light-theme-secondary);
}

.light-theme .card {
  background-color: var(--light-card-bg);
  color: var(--light-theme-text);
}
</style>